<template>
	<div>
		<div class="breadcrumb">
			<el-button type="text" @click="$router.back()" icon="el-icon-arrow-left" style="font-size: 14px;">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">培训经历</div>
			</div>
			<div>
				<el-form :model="formInline" class="demo-form-inline" label-width="100px">
					<el-form-item label="获得日期：">
						<el-date-picker v-model="formInline.getDate" class="formInput" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择年月"></el-date-picker>
					</el-form-item>
					<el-form-item label="培训部门：">
						<el-input v-model="formInline.trainingDepartment" class="formInput" placeholder="请输入培训部门"></el-input>
					</el-form-item>
					<el-form-item label="培训名称：">
						<el-input v-model="formInline.trainingName" class="formInput" placeholder="请输入培训名称"></el-input>
					</el-form-item>
					<el-form-item label="证书：">
						<el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="uploadFile">
							<img v-if="formInline.image" :src="formInline.image" class="avatar">
							<div v-else>
								<i class="el-icon-plus avatar-uploader-icon"></i>
								<p><span>上传证书图片</span></p>
							</div>
						</el-upload>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="bottomBtns">
			<!-- <el-button type="primary" round @click="$router.back()">返回</el-button> -->
			<el-button type="primary" round @click="submit">完成</el-button>
		</div>
	</div>
</template>

<script>
	import add from '../utils/index.js'
	export default {
		data() {
			return {
				formInline: {
					trainingDepartment: '' ,// 培训部门
					trainingName: '' ,// 培训名称
					image: '' ,// 证书图片
					getDate: '' ,// 获得时间
					isOpen: '1' // 是否公开
				}
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 11)
		},
		mounted() {
			if (this.$route.query.index > -1) {
				this.dataIndex = this.$route.query.index
				// 页面数据渲染
				add.training.getSelf(this.dataIndex, (data) => {
					this.formInline.trainingDepartment = data.trainingDepartment
					this.formInline.trainingName = data.trainingName
					this.formInline.image = data.image
					this.formInline.getDate = data.getDate
					this.formInline.isOpen = data.isOpen
				})
				this.isUpdete = true
			} else {
				this.isUpdete = false
			}

		},
		watch: {


		},
		methods: {
			submit(){
				if(!this.formInline.getDate){
					this.$message.error('请选择获得日期')
					return
				} else if(!this.formInline.trainingDepartment){
					this.$message.error('请输入培训部门')
					return
				} else if(!this.formInline.trainingName){
					this.$message.error('请输入培训名称')
					return
				} 
				if(!this.isUpdete){
					add.training.addition(this.formInline)
				} else {
					add.training.update(this.formInline, this.dataIndex)
				}
				this.$router.back()
			},
			uploadFile(file){
				// 上传文件
				let File = file.file
				add.uploadFile(File, (data) => {
					this.formInline.image = data
					this.$message.success('上传成功')
				})
				
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
		min-height: 595px;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.formInput {
		width: 420px;
	}

	.formDate {
		width: 150px;
	}

	.avatar-uploader>>>.el-upload {
		/* border: 1px dashed #d9d9d9; */
		border: 1px solid #d9d9d9;
		/* border-radius: 6px; */
		cursor: pointer;
		position: relative;
		overflow: hidden;
		color: #AAAAAA;
	}

	.el-upload p {
		height: 32px;
		margin-top: -32px;
		font-size: 12px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 240px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}

	.avatar {
		width: 240px;
		height: 150px;
		display: block;
	}

	.bottomBtns {
		width: 100%;
		border-top: 1px solid #DCDCDC;
		padding: 30px 0;
		text-align: center;
	}

	.bottomBtns button {
		width: 100px;
	}
</style>
